<template>
    <div class="app-container">
        <div class="app-box">
            <el-button size="mini" @click="toDialog">模板</el-button>
            <el-dialog
            title="配置模板"
            :visible.sync="dialogVisible"
            :close-on-click-modal='false'
            width="550px">
            <div><el-transfer v-model="value1" :data="data2" @change='getVal' target-order='push'>
                    <!-- <el-button class="transfer-footer" slot="left-footer" size="mini">操作</el-button>
                    <el-button class="transfer-footer" slot="right-footer" size="mini">操作</el-button> -->
                </el-transfer></div>
            <div style="text-align:center;margin-top:30px;">
                <el-button size='mini' type="primary" @click="sure">确定</el-button>
            </div>
            </el-dialog>
            {{value1}}
        </div>
    </div>
</template>
<script>
export default {
     data() {
      const generateData = _ => {
        const data = [];
        for (let i = 1; i <= 15; i++) {
          data.push({
            key: i,
            label: `备选项 ${ i }`,
          });
        }
        return data;
      };
      return {
        data: generateData(),
        value1: [1, 4,6],
        data2:[{
            key:1,
            label:'123'
        },{
            key:2,
            label:'347350'
        },{
            key:3,
            label:'7429hfu'
        },{
            key:4,
            label:'chuw08'
        },{
            key:5,
            label:'jfcoewu8942'
        },{
            key:6,
            label:'5/**f8'
        },{
            key:7,
            label:'ckfpow34'
        },{
            key:8,
            label:'mcn  w9'
        }],
        dialogVisible:false,
      };
    },
    methods:{
        toDialog(){
            this.dialogVisible = true;
        },
        getVal(a,b,c){
            // console.log(a);
            // console.log(b);
            // console.log(c);
            console.log(this.value1);
        },
        sure(){
            this.dialogVisible = false;
        }
    }
}
</script>
<style>

</style>


